<template>
  <v-container >
    <v-slide-group
      v-model="model"
      class="pa-4"
      center-active
    >
      <v-slide-item v-slot="{ toggle }">
        <v-card
          color="grey lighten-1"
          class="ma-4"
          height="400"
          width="300"
          @click="toggle"
        >
          <v-card width="300">
            <v-img
              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
              src="https://hbimg.huabanimg.com/4e94d585c031142e6488faef1b267905d75435b04685-0EOwdZ_fw658/format/webp"
            >
            </v-img>
          </v-card>
        </v-card>
      </v-slide-item>

      <v-slide-item v-slot="{ toggle }">
        <v-card
          color=" grey lighten-1"
          class="ma-4"
          height="400"
          width="300"
          @click="toggle"
        >
          <v-row class="fill-height" align="center" justify="center">
            <v-container>
              <v-card width="300">
                <v-img
                  height="250px"
                  src="https://hbimg.huabanimg.com/d911a4e9bdec464d7578f15967bf4b5918d9db065491-AqLErR_fw658/format/webp"
                >
                  <v-toolbar-title class="text-h6 white--text pl-1 mt-2">
                    关于我
                  </v-toolbar-title>

                  <v-spacer></v-spacer>

                  <v-card-title class="white--text mt-8">
                    <v-avatar size="56">
                      <img alt="user" src="../../assets/SunRec.jpg" />
                    </v-avatar>
                    <p class="ml-3">Yiwyn</p>
                    <p class="ml-3">伊温</p>
                  </v-card-title>
                </v-img>

                <v-card-text>
                  <div class="font-weight-bold ml-8 mb-2">
                    Email：5597104@qq.com
                  </div>
                  <div class="font-weight-bold ml-8 mb-2">
                    <a href="https://space.bilibili.com/32149062">
                      Bilibili：Yiwyn</a
                    >
                  </div>
                  <div class="font-weight-bold ml-8 mb-2">
                    <a href="https://github.com/Yiwyn">
                      GitHub：https://github.com/Yiwyn</a
                    >
                  </div>
                  <div class="font-weight-bold ml-8 mb-2">
                    <a href="https://gitee.com/yiwyn">
                      Gitee：https://gitee.com/yiwyn</a
                    >
                  </div>
                </v-card-text>
              </v-card>
            </v-container>
          </v-row>
        </v-card>
      </v-slide-item>

      <v-slide-item v-slot="{ toggle }">
        <v-card
          color="grey lighten-1"
          class="ma-4"
          height="400"
          width="300"
          @click="toggle"
        >
          <v-card width="300">
            <v-img
              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
              src="https://hbimg.huabanimg.com/96389c3e3a9ec0aca4b2ad70dc7673f9e90ba5b619b09-Hnrf5D_fw658/format/webp"
            >
            </v-img>
          </v-card>
        </v-card>
      </v-slide-item>
    </v-slide-group>
  </v-container>
</template>


<script>
export default {
  data: () => ({
    model: 1,
  }),
};
</script>
